<!DOCTYPE html>
<html>

<head>
    <script src="angular.js/angular.min.js"></script>
    <script src="js/viewmodel/server_watcher.js"></script>
</head>

<body class="fixed">
    <!-- <div  ng-app="routingDemoApp" ng-controller="gateway_watcher_Ctrl"> -->
    <div class="row">
        <div class="col-lg-3 ">
            <div class="card mb-4">
                <div class="card-header">
                    <h2 class="fs-18 font-weight-bold mb-0">设备列表</h2>
                </div>
                <div class="card-body">
                    <div class="dd" id="nestable">
                        <!-- <ol class="dd-list" >
                                <li class="dd-item" ng-repeat="x in gateways" data-id="1" ng-click="toggle(x)">
                                    <div class="dd-handle">
                                        <span ng-class="x.name!=currentGateway.name ? 'label bg-green' : 'label bg-red'" >
                                            <i class="fas fa-laptop"></i>
                                        </span> {{x.name}}
                                    </div>
                                </li>
                            </ol> -->
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                            aria-orientation="vertical">
                            <a style="cursor:pointer" ng-repeat="x in gateways"
                                ng-class="x.ClientName!=currentGateway.ClientName ? 'nav-link' : 'nav-link active'"
                                id="v-pills-home-tab" data-toggle="pill" ng-click="toggle(x)" role="tab"
                                aria-controls="v-pills-home" aria-selected="true"> {{x.ClientName}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-9">
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row">
                        <div class="col-lg-9">
                            <h2 class="fs-18 font-weight-bold mb-0">通讯报文</h2>
                            <select name="somename" class="form-control form-control-lg mt-2" id="countSelect"
                                ng-model="totCount" ng-options="x.value as x.title for x in disList">
                            </select>
                        </div>
                        <div class="col-lg-3 text-right text-bottom">
                            <div style="height:40px"></div>
                            <div class="toggle-button-wrapper"  >
                                <input id="watchPauseButton" type="checkbox" class="mytoggle-button" name="switch"
                                    ng-model="pauseFlag">
                                <label for="watchPauseButton" class="button-label">
                                    <span class="circle"></span>
                                    <span class="text on">继续</span>
                                    <span class="text off">停止</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="chat_list">
                        <li ng-repeat="x in frames" ng-class="x.direct=='tx' ? 'clearfix' : 'clearfix odd'">
                            <div class="chat-avatar">
                                <img ng-src="{{x.direct=='tx' ? 'static/img/server.png' : 'static/img/item.png'}}">
                                <i>{{x.time}}</i>
                            </div>
                            <div class="conversation-text">
                                <div class="ctext-wrap">
                                    <i>{{x.direct}}</i>
                                    <p>{{x.frame}}</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- </div> -->
</body>

</html>